<template>
  <div>
    <h1>配置1</h1>
    <code>
      config = {{columns}}
    </code>
    <br/>
    <code>
      action = {{actionMap}}
    </code>
    <table-helper :columns="columns" :form-data="bannerCateItems" :action="actionMap">
    </table-helper>


    <h1>配置2</h1>
    <code>
      config = {{columns}}
    </code>
    <br/>
    <code>
      action = {{actionMap}}
    </code>
    <br/>
    <code>
      pageInfo = {{pageInfo}}
    </code>
    <table-helper :columns="columns" :form-data="items2" :action="actionMap" :page-info="pageInfo"
                  @page-change="pageChange">
    </table-helper>
  </div>
</template>
<script>
  import { config, items } from './model'
  import TableHelper from './table'
  import helper from './table-helper'

  function bindHandler (actions, that) {
    actions.forEach(item => {
      that[item.key] && (item.handler = that[item.key].bind(that))
    })
  }

  export default {
    mixins: [helper],
    data () {
      bindHandler(config.action.actions, this)
      return {
        columns: config.items,
        actionMap: config.action,
        bannerCateItems: items, //測試數據
        pageInfo: {
          total: items.length,
          size: 5,
          current: 1
        }
      }
    },
    computed: {
      items2(){
        const start = (this.pageInfo.current - 1) * this.pageInfo.size || 0
        const end = Math.min(this.bannerCateItems.length, this.pageInfo.current * this.pageInfo.size)
        return this.bannerCateItems.slice(start, end)
      },

    },
    methods: {
      initDef(){},
      delCate (row) {
        this.delBox('delBannerCate', {id: row.id}, 'del')
      },
      setDefault (row) {
        this.callAction('setDefaultBannerCate', {id: row.id}, 'setting')
      },
      pageChange(page){
        this.pageInfo.current = page
      }
    },
    components: {
      TableHelper
    }
  }
</script>
